import React, { Component } from 'react';
import { Button, Alert, View, StyleSheet } from 'react-native';

class PButton extends Component {

    onBtnPress = () => {
        Alert.alert('You tapped the button!')
    }

    render(){
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Button onPress={this.onBtnPress} title="Press Me"/>
                </View>
                <View style={styles.buttonContainer}>
                    <Button onPress={this.onBtnPress} title="Press Me" color="#841584"/>
                </View>
                <View style={styles.alternativeLayoutButtonContainer}>
                    <Button onPress={this.onBtnPress} title="This looks great!"/>
                    <Button onPress={this.onBtnPress} title="Ok!" color="#841584"/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20,
    },
    alternativeLayoutButtonContainer: {
        margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

export default PButton